<template>
	<view class="detail">
		<view class="item">
			<text>户主名：</text> <text style="font-size: 0.8em;">{{houseHolder}}</text>
		</view>
		<view class="item">
			<text>运营商：</text> <text style="font-size: 0.8em;">{{op}}</text>
		</view>
		<view class="item">
			<text>住址：</text> <text style="font-size: 0.8em;">{{level2Name}}-{{level3Name}}-{{houseGroup}}组-{{houseNumber}}号</text>
		</view>
		<view class="item">
			<text>是否常住：</text> <text style="font-size: 0.8em;">{{permanent === 1? '是':'否'}}</text>
		</view>
		<view class="item">
			<text>联系电话：</text> <text style="font-size: 0.8em;color: cornflowerblue;" @click="call">{{phone}}</text>
		</view>
		<view class="item">
			<text>家庭支出额：</text> <text style="font-size: 0.8em;">{{houseCConsume | cutMoneyFiter}} 元/月</text>
		</view>
		<view class="item">
			<text>当前套餐：</text> <text style="font-size: 0.8em;">{{currentSet}}</text>
		</view>
		<view class="item">
			<text>当前套餐到期时间：</text> <text style="font-size: 0.8em;">{{menuExpireTime}}</text>
		</view>
		<view class="item">
			<text>走访情况：</text> <text style="font-size: 0.8em;">{{visitDetails}}</text>
		</view>
		<view class="item">
			<text>详细地址：</text> <text style="font-size: 0.8em;color: cornflowerblue;" @click="openLocation">{{address}}</text>
		</view>
		<view class="item">
			<text>备注：</text> <text style="font-size: 0.8em;">{{remark}}</text>
		</view>
		<view class="item">
			<text>录入用户：</text> <text style="font-size: 0.8em;">{{userName}}</text>
		</view>
		<view class="item">
			<text>录入时间：</text> <text style="font-size: 0.8em;">{{createTime.substring(0,16)}}</text>
		</view>
		<view>
			<view class="item">现场照片:</view>
			<image :src="siteImage? siteImage : '/static/noimage.png' " @click="clickImg(siteImage)"
				mode="aspectFill" />
		</view>
	</view>
</template>

<script>
	import {
		cutMoneyFiter
	} from '@/utils/defined'
	export default {
		data() {
			return {
				baseImgUrl: '',
				id: '',
				userId: '',
				userName: '',
				level2Name: '',
				level3Name: '',
				houseGroup: '',
				houseNumber: '',
				houseHolder: '',
				permanent: 1,
				phone: '',
				op: '',
				houseCConsume: '',
				currentSet: '',
				menuExpireTime: '',
				visitDetails: '',
				siteImage: '',
				address: '',
				remark: '',
				longitude: 0,
				latitude: 0,
				createTime: '',
				createBy: ''
			}
		},
		filters: {
			cutMoneyFiter
		},
		onLoad(option) {
			this.id = option.id
			this.getSetRecordDetail(this.id)
		},
		methods: {
			getSetRecordDetail(id) {
				let params = id
				this.$u.api.set.setRecordDetail(params).then((res) => {
					this.id = res.data.id
					this.userName = res.data.userName
					this.level2Name = res.data.level2Name
					this.level3Name = res.data.level3Name
					this.houseGroup = res.data.houseGroup
					this.houseNumber = res.data.houseNumber
					this.houseHolder = res.data.houseHolder
					this.permanent = res.data.permanent
					this.phone = res.data.phone
					this.op = res.data.op
					this.houseCConsume = res.data.houseCConsume
					this.currentSet = res.data.currentSet
					this.menuExpireTime = res.data.menuExpireTime
					this.visitDetails = res.data.visitDetails
					this.siteImage = res.data.siteImage
					this.address = res.data.address
					this.remark = res.data.remark
					this.longitude = res.data.longitude
					this.latitude = res.data.latitude
					this.createTime = res.data.createTime
					this.createBy = res.data.createBy
				});
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				});
			},
			openLocation() {
				uni.openLocation({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					scale: 18
				});
			},
			clickImg(url) {
				wx.previewImage({
					urls: [this.baseImgUrl + url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		margin-bottom: 50rpx;
		text-align: center;
		font-size: 1.5em;
		font-weight: bold;
		color: #8D72E1;
	}

	.detail {
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.item {
		margin-top: 20rpx;
		font-family: ;
		font-size: 1em;
		border-left-style: solid;
		border-left-color: #8D9EFF;
		padding-left: 20rpx;
	}

	.map {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	image {
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
